<template>
  <div style="margin-left: 0px; margin-top: 150px">
    <div style="width: 410px; margin-left: 37.5%">
      <div class="message">请谨慎修改您的密码</div>
    </div>
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
      size="large"
    >
      <el-form-item label="用户名" prop="username" class="margin">
        <el-input
          v-model="ruleForm.username"
          style="width: 400px"
          :disabled="true"
        ></el-input>
      </el-form-item>

      <el-form-item label="新密码" prop="userNewPassword" class="margin">
        <el-input
          type="password"
          v-model="ruleForm.userNewPassword"
          style="width: 400px"
        ></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="userCheckPassword" class="margin">
        <el-input
          type="password"
          v-model="ruleForm.userCheckPassword"
          style="width: 400px"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm()" class="button1"
          >提交</el-button
        >
        <el-button @click="back" class="button2">返回</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import request from "@/utils/request";
import { ElMessage } from "element-plus";
export default {
  name: "userEditInformation",
  data() {
    return {
      ruleForm: {
        username: "",
        userNewPassword: "",
        userCheckPassword: "",
      },
      rules: {
        userNewPassword: [
          {
            validator: (rule, value, callback) => {
              if (value.length < 6) {
                return callback(new Error("密码不能少于6位！"));
              } else if (value.length > 16) {
                return callback(new Error("密码最长不能超过16位！"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
        userCheckPassword: [
          {
            validator: (rule, value, callback) => {
              if (this.ruleForm.userCheckPassword === "") {
                callback(new Error("请再次输入密码"));
              } else if (
                this.ruleForm.userCheckPassword != this.ruleForm.userNewPassword
              ) {
                callback(new Error("两次输入密码不一致!"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {
    this.findUserByToken();
  },
  methods: {
    back() {
      this.$router.back();
    },
    findUserByToken() {
      request
        .get("/secure/getUserInfo")
        .then((res) => {
          this.ruleForm.username = res.data.username;
        })
        .catch((err) => {
          console.log(err);
          alert("获取信息失败");
        });
    },
    //传新密码
    submitForm() {
      request
        .post("/users/modifypassword", {
          id: sessionStorage.getItem("userid"),
          username: this.ruleForm.username,
          password: this.ruleForm.userNewPassword,
        })
        .then((res) => {
          if (res.code == 200) {
            ElMessage({
              showClose: true,
              message: "修改密码成功",
              type: "success",
            });
          } else
            ElMessage({
              showClose: true,
              message: "修改密码失败",
              type: "error",
            });
        })
        .catch((err) => {
          ElMessage({
            showClose: true,
            message: "修改密码失败",
            type: "error",
          });
          console.log(err);
        });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style scoped>
.table {
  background: #ffffffdd;
  width: 100%;
  height: 88%;
  position: relative;
  border-radius: 10px;
  padding-top: 60px;
}
.margin {
  margin-left: 30%;
  width: 500px;
}
.button1 {
  width: 150px;
  margin-left: 30%;
}
.button2 {
  width: 150px;
  margin-left: 100px;
}
.message {
  -webkit-text-size-adjust: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Liberation Sans",
    "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", "Wenquanyi Micro Hei",
    "WenQuanYi Zen Hei", "ST Heiti", SimHei, SimSun, "WenQuanYi Zen Hei Sharp",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  text-align: left;
  box-sizing: inherit;
  position: relative;
  min-height: 1em;
  margin: 1em 0em;
  padding: 1em 1.5em;
  line-height: 1.4285em;
  transition: opacity 0.1s ease, color 0.1s ease, background 0.1s ease,
    box-shadow 0.1s ease, -webkit-box-shadow 0.1s ease;
  font-size: 1em;
  border-radius: 4px;
  border: 1px solid #e3e9ed;
  background: #fff;
  margin-bottom: 10px;
  background-color: #ffe8e6;
  color: #db2828;
  box-shadow: 0px 0px 0px 1px #db2828 inset, 0px 0px 0px 0px rgba(0, 0, 0, 0);
  margin-top: 0px;
}
</style>
